<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen">

<!-- Theme Stylesheet -->
<link rel="stylesheet" href="assets/css/dandelion.theme.css" media="screen">
<!-- Icon Stylesheet -->
<link rel="stylesheet" href="assets/css/fonts/glyphicons/style.css" media="screen">
<!--  Main Stylesheet -->
<link rel="stylesheet" href="assets/css/dandelion.css" media="screen">
<!-- Demo Stylesheet -->
<link rel="stylesheet" href="assets/css/demo.css" media="screen">

<title>Dandelion Admin - Grids and Panels</title>

</head>

<body>

    <!-- Dandelion Customizer (remove if not needed) -->
    <div id="da-customizer">
        <div id="da-customizer-content">
            <ul>
                <li>
                    <span class="da-customizer-title">Background Pattern</span>
                    <span id="da-customizer-body-bg"></span>
                </li>
                <li>
                    <span>Header Pattern</span>
                    <span id="da-customizer-header-bg"></span>
                </li>
                <li>
                    <span>Layout</span>
                    <ul id="da-customizer-layouts" class="clearfix">
                        <li>
                            <input type="radio" id="da-customizer-fluid" name="da-layout" checked="checked">
                            <label for="da-customizer-fluid">Fluid</label>
                        </li>
                        <li>
                            <input type="radio" id="da-customizer-fixed" name="da-layout">
                            <label for="da-customizer-fixed">Fixed</label>
                        </li>
                    </ul>
                </li>
            </ul>
            <div id="da-customizer-button">
                <button class="btn btn-danger">Get CSS</button>
            </div>
        </div>
        <span id="da-customizer-pulldown"><i class="icon-cogwheels"></i></span>
    </div>
    
	<!-- Main Wrapper. Set this to 'fixed' for fixed layout and 'fluid' for fluid layout' -->
	<div id="da-wrapper">
    
        <!-- Header -->
        <div id="da-header">
        
            <div id="da-header-top">
                
                <!-- Container -->
                <div class="da-container clearfix">
                    
                    <!-- Logo Container. All images put here will be vertically centere -->
                    <div id="da-logo-wrap">
                        <div id="da-logo">
                            <div id="da-logo-img">
                                <a href="dashboard.html">
                                    <img src="assets/images/logo.png" alt="Dandelion Admin">
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Header Toolbar Menu -->
                    <div id="da-header-toolbar" class="clearfix">
                        <div id="da-user-profile-wrap">
                            <div id="da-user-profile" data-toggle="dropdown" class="clearfix">
                                <div id="da-user-avatar">
                                    <img src="assets/images/pp.jpg" alt="">
                                </div>
                                <div id="da-user-info">
                                    John Doe
                                    <span class="da-user-title">Creative Director</span>
                                </div>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Change Password</a></li>
                            </ul>
                        </div>
                        <div id="da-header-button-container">
                            <ul>
                                <li class="da-header-button-wrap">
                                    <div class="da-header-button" data-toggle="dropdown">
                                        <span class="btn-count">32</span>
                                        <a href="#"><i class="icon-circle-exclamation-mark"></i></a>
                                    </div>
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <span class="da-dropdown-sub-title">Notifications</span>
                                            <ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer" href="#">
                                                View all notifications
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="da-header-button-wrap">
                                    <div class="da-header-button" data-toggle="dropdown">
                                        <span class="btn-count">5</span>
                                        <a href="#"><i class="icon-envelope"></i></a>
                                    </div>
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <span class="da-dropdown-sub-title">Messages</span>
                                            <ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer" href="#">
                                                View all messages
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="da-header-button-wrap">
                                    <div class="da-header-button">
                                        <a href="index.html"><i class="icon-power"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                                    
                </div>
            </div>
            
            <div id="da-header-bottom">
                <!-- Container -->
                <div class="da-container clearfix">
                
                	<div id="da-search">
                    	<form>
                        	<input type="text" class="search-query" placeholder="Search...">
                        </form>
                    </div>
                	
                    <!-- Breadcrumbs -->
                    <div id="da-breadcrumb">
                        <ul>
                            <li><a href="dashboard.html"><i class="icon-home"></i> Dashboard</a></li>
                            <li><span>Layout and Typography</span></li>
                            <li class="active"><span>Grids and Panels</span></li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
    
        <!-- Content -->
        <div id="da-content">
            
            <!-- Container -->
            <div class="da-container clearfix">
            
                <!-- Sidebar Separator do not remove -->
                <div id="da-sidebar-separator"></div>
                
                <!-- Sidebar -->
                <div id="da-sidebar">

                    <!-- Navigation Toggle for < 480px -->
                    <div id="da-sidebar-toggle"></div>
                
                    <!-- Main Navigation -->
                    <div id="da-main-nav" class="btn-container">
                        <ul>
                            <li>
                                <a href="dashboard.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-home"></i>
                                    </span>
                                    Dashboard
                                </a>
                            </li>
                            <li>
                                <a href="statistics.html">
                                    <!-- Nav Notification -->
                                    <span class="da-nav-count">32</span>
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-stats"></i>
                                    </span>
                                    Statistics
                                </a>
                            </li>
                            <li>
                                <a href="calendar.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-calendar"></i>
                                    </span>
                                    Calendar
                                </a>
                            </li>
                            <li>
                                <a href="file.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-folder-open"></i>
                                    </span>
                                    File Handling
                                </a>
                            </li>
                            <li>
                                <a href="table.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-table"></i>
                                    </span>
                                    Table
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-edit"></i>
                                    </span>
                                    Form
                                </a>
                                <ul>
                                    <li><a href="form-layouts.html">Layouts</a></li>
                                    <li><a href="form-elements.html">Elements</a></li>
                                    <li><a href="form-validation.html">Validation</a></li>
                                    <li><a href="form-wizard.html">Wizard</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="ui.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-settings"></i>
                                    </span>
                                    UI Elements
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-font"></i>
                                    </span>
                                    Layout and Typography
                                </a>
                                <ul class="closed">
                                    <li><a href="grids.html">Grids and Panels</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="gallery.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-picture"></i>
                                    </span>
                                    Gallery
                                </a>
                            </li>
                            <li>
                                <a href="error.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-warning-sign"></i>
                                    </span>
                                    Error Page (404)
                                </a>
                            </li>
                            <li>
                                <a href="icons.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-crown"></i>
                                    </span>
                                    Icons
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Main Content Wrapper -->
                <div id="da-content-wrap" class="clearfix">
                
                	<!-- Content Area -->
                	<div id="da-content-area">
                    
                        <div class="row-fluid">
                        	<div class="span6">
                                <div class="da-panel">
                                	<div class="da-panel-content">
                                    	Plain grid area
                                    </div>
                                </div>
                            </div>
                        	<div class="span6">
                                <div class="da-panel">
                                	<div class="da-panel-content">
                                    	Plain grid area
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">
                        	<div class="span9">
                                <div class="da-panel">
                                	<div class="da-panel-content">
                                    	Plain grid area
                                    </div>
                                </div>
                            </div>
                        	<div class="span3">
                                <div class="da-panel">
                                	<div class="da-panel-content">
                                    	Plain grid area
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row-fluid">
                        	<div class="span6">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Collapsible Panel
                                        </span>
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                            <div class="span6">
                            	<div class="da-panel collapsible collapsed">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Collapsible Panel (Closed)
                                        </span>
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">
                        	<div class="span6">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Panel with Padding
                                        </span>
                                    </div>
                                    <div class="da-panel-content with-padding">
    		                        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non leo convallis nibh tristique commodo. Cras tincidunt hendrerit pharetra. Etiam erat magna, egestas sed placerat at, congue sed nisi. Nullam eget varius leo. Integer at justo a velit imperdiet pulvinar. Sed magna mi, sodales sit amet aliquet ac, eleifend eget sem. Nam ipsum lectus, fringilla sed rutrum ac, tempus in orci. Pellentesque condimentum dui a elit rutrum at posuere tellus dignissim. Aliquam erat volutpat. Suspendisse potenti. Sed convallis convallis tellus, id volutpat leo euismod in. Curabitur dapibus commodo vehicula. Nullam varius, lacus at porta pellentesque, dolor massa rutrum lorem, vehicula dapibus dui erat nec mi. Donec condimentum lectus ut ligula condimentum et luctus orci pharetra. Fusce semper tempor dui, vitae sollicitudin mauris volutpat in. Aliquam erat volutpat.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="span6">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Panel without Padding
                                        </span>
                                    </div>
                                    <div class="da-panel-content">
    		                        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non leo convallis nibh tristique commodo. Cras tincidunt hendrerit pharetra. Etiam erat magna, egestas sed placerat at, congue sed nisi. Nullam eget varius leo. Integer at justo a velit imperdiet pulvinar. Sed magna mi, sodales sit amet aliquet ac, eleifend eget sem. Nam ipsum lectus, fringilla sed rutrum ac, tempus in orci. Pellentesque condimentum dui a elit rutrum at posuere tellus dignissim. Aliquam erat volutpat. Suspendisse potenti. Sed convallis convallis tellus, id volutpat leo euismod in. Curabitur dapibus commodo vehicula. Nullam varius, lacus at porta pellentesque, dolor massa rutrum lorem, vehicula dapibus dui erat nec mi. Donec condimentum lectus ut ligula condimentum et luctus orci pharetra. Fusce semper tempor dui, vitae sollicitudin mauris volutpat in. Aliquam erat volutpat.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span3">
                            	<div class="da-panel">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-building"></i>
                                            Panel with Black Icon
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        	<div class="span3">
                            	<div class="da-panel">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Panel with Black Icon
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        	<div class="span3">
                            	<div class="da-panel">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icol-award-star-gold"></i>
                                            Panel with Color Icon
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        	<div class="span3">
                            	<div class="da-panel">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icol-delivery"></i>
                                            Panel with Color Icon
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
		                <div class="row-fluid">
                        	<div class="span12">
                            	<div class="da-panel">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icol-eye" rel="tooltip" title="This is a tooltip" data-placement="left"></i>
                                            Panel with Tooltip (hover my eye)
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row-fluid">
                        	<div class="span3">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Grid 3
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
		                <div class="row-fluid">                        
                        	<div class="span6">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Grid 6
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
		                <div class="row-fluid">
                            <div class="span9">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Grid 9
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
		                <div class="row-fluid">
                        	<div class="span12">
                            	<div class="da-panel collapsible">
                                	<div class="da-panel-header">
                                    	<span class="da-panel-title">
                                            <i class="icon-display"></i>
                                            Grid 12
                                        </span>
                                        
                                    </div>
                                    <div class="da-panel-content with-padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div id="da-footer">
        	<div class="da-container clearfix">
            	<p>Copyright 2012. Dandelion Admin. All Rights Reserved.
            </div>
        </div>
        
    </div>

    <!-- JS Libs -->
    <script src="assets/js/libs/jquery-1.8.3.min.js"></script>
    <script src="assets/js/libs/jquery.placeholder.min.js"></script>
    <script src="assets/js/libs/jquery.mousewheel.min.js"></script>

    <!-- JS Bootstrap -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    
    <!-- jQuery-UI JavaScript Files -->
    <script src="assets/jui/js/jquery-ui-1.9.2.min.js"></script>
    <script src="assets/jui/jquery.ui.timepicker.min.js"></script>
    <script src="assets/jui/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/jui/css/jquery.ui.all.css" media="screen">

    <!-- JS Plugins -->

    <!-- JS Demo -->

    <!-- JS Template -->
    <script src="assets/js/core/dandelion.core.js"></script>

    <!-- JS Customizer -->
    <script src="assets/js/core/dandelion.customizer.js"></script>

</body>
</html>
